<script lang="ts" setup>
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import type { UploadFile, UploadFiles, UploadUserFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
// 是否可以多选
const multiple = ref(false)
// 当前上传文件数量
const fileCount = ref(0)

const props = defineProps({
  // 文件数量
  count: {
    type: Number,
    required: true
  },
  // 文件上传检查回调
  checkHandle: {
    type: Function
  },
  // 文件变动回调
  fileHandle: {
    type: Function,
    required: true
  },
  // 文件回显
  fileList: {
    type: Array as () => UploadUserFile[],
    required: true
  },
  // 文件列表类型
  listType: {
    type: String,
    default: 'picture-card'
  },
  tip: {
    type: String,
    default: ''
  }
})

// 如果是多个文件，可以多选
if (props.count > 1) {
  multiple.value = true
}

// 下载回调
const handleRemove = (file: UploadFile) => {
  console.log(file)
}

// 查看回调
const handlePreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

// 下载回调
const handleDownload = (file: UploadFile) => {
  console.log(file)
}

// 文件状态改变回调
const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  // 放入文件列表
  props.fileHandle(uploadFiles)
  // 更新文件数量
  fileCount.value = uploadFiles.length
  // 回调检查
  if (props.checkHandle) {
    return props.checkHandle()
  }
  return false
}
</script>
<template>
  <div>
    <el-upload
      :file-list="props.fileList"
      action="#"
      :limit="props.count"
      list-type="text"
      :auto-upload="false"
      :multiple="multiple"
      :on-change="handleChange"
    >
      <template #trigger>
        <el-button type="primary">点击选择文件</el-button>
      </template>
      <template #tip>
        <div class="el-upload__tip text-red">
          {{ props.tip }}
        </div>
      </template>
    </el-upload>
  </div>
</template>
